<template>
    <div class="container">
        <!-- <h2 class="text-xl font-medium mb-6">血糖管理</h2> -->
        <el-row :gutter="20">
            <el-col :span="11">
                <h3 class="text-lg font-medium mb-4">血糖记录</h3>
                <el-form :model="glucoseForm" label-width="120px">
                    <el-form-item label="血糖值">
                        <el-input v-model="glucoseForm.value" class="!rounded-button" placeholder="请输入血糖值" />
                    </el-form-item>
                    <el-form-item label="测量时间">
                        <el-select v-model="glucoseForm.timePoint" class="w-full !rounded-button">
                            <el-option v-for="point in timePoints" :key="point.value" :label="point.label"
                                :value="point.value" />
                        </el-select>
                    </el-form-item>
                    <el-form-item>
                        <el-button type="primary" class="!rounded-button" @click="handleGlucoseSubmit">
                            记录
                        </el-button>
                    </el-form-item>
                </el-form>

                <div class="mt-8">
                    <h3 class="text-lg font-medium mb-4">今日记录</h3>
                    <div class="space-y-4">
                        <div v-for="(record, index) in todayRecords" :key="index" class="p-4 border rounded-lg mb-4"
                            style="border:1px solid #e5e7eb;">
                            <div class="flex justify-between items-center">
                                <div>
                                    <div class="font-medium">{{ record.timePoint }}</div>
                                    <div class="text-sm text-gray-500">{{ record.time }}</div>
                                </div>
                                <div :class="[
                                'text-lg font-medium',
                                record.value > 7.8 ? 'text-red-500' : 'text-green-500'
                            ]">
                                    {{ record.value }} mmol/L
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </el-col>

            <el-col :span="12">
                <h3 class="text-lg font-medium mb-4">血糖趋势</h3>
                <div id="glucoseChart" ref="glucoseChartRef" style="height: 400px;width: 600px;"></div>

                <div class="mt-8">
                    <h3 class="text-lg font-medium mb-4">控制建议</h3>
                    <div class="p-6 bg-green-50 rounded-lg">
                        <div class="space-y-4">
                            <div class="flex items-start mb-4">
                                <el-icon class="text-green-500 mt-1 mr-2">
                                    <Check />
                                </el-icon>
                                <div>控制碳水化合物的摄入，选择全谷物、低GI食物</div>
                            </div>
                            <div class="flex items-start mb-4">
                                <el-icon class="text-green-500 mt-1 mr-2">
                                    <Check />
                                </el-icon>
                                <div>保持规律运动，每天进行适度的散步</div>
                            </div>
                            <div class="flex items-start mb-4">
                                <el-icon class="text-green-500 mt-1 mr-2">
                                    <Check />
                                </el-icon>
                                <div>按时监测血糖，保持良好的作息时间</div>
                            </div>
                        </div>
                    </div>
                </div>
            </el-col>

        </el-row>
    </div>
</template>

<script setup>
import { ref, onMounted } from 'vue';
import { Location, Warning, Check } from '@element-plus/icons-vue';
import * as echarts from 'echarts';


// 血糖管理相关数据
const glucoseChartRef = ref();
const glucoseForm = ref({
    value: '',
    timePoint: ''
});

const timePoints = [
    { value: 'breakfast_before', label: '早餐前' },
    { value: 'breakfast_after', label: '早餐后' },
    { value: 'lunch_before', label: '午餐前' },
    { value: 'lunch_after', label: '午餐后' },
    { value: 'dinner_before', label: '晚餐前' },
    { value: 'dinner_after', label: '晚餐后' }
];

const todayRecords = [
    { timePoint: '早餐前', time: '07:30', value: 5.6 },
    { timePoint: '早餐后', time: '09:30', value: 7.2 },
    { timePoint: '午餐前', time: '11:30', value: 5.8 }
];

onMounted(()=>{
    // 初始化血糖趋势图表
    if (glucoseChartRef.value) {
        const glucoseChart = echarts.init(glucoseChartRef.value);
        const glucoseOption = {
            tooltip: {
                trigger: 'axis'
            },
            xAxis: {
                type: 'category',
                data: ['周一', '周二', '周三', '周四', '周五', '周六', '周日']
            },
            yAxis: {
                type: 'value'
            },
            series: [{
                name: '血糖值',
                type: 'line',
                data: [5.6, 6.2, 5.8, 6.5, 6.0, 5.9, 6.1],
                smooth: true,
                lineStyle: {
                    color: '#10B981'
                },
                areaStyle: {
                    color: {
                        type: 'linear',
                        x: 0,
                        y: 0,
                        x2: 0,
                        y2: 1,
                        colorStops: [{
                            offset: 0,
                            color: 'rgba(16,185,129,0.2)'
                        }, {
                            offset: 1,
                            color: 'rgba(16,185,129,0)'
                        }]
                    }
                }
            }]
        };
        glucoseChart.setOption(glucoseOption);
    }
})
const handleGlucoseSubmit = () => {
    console.log('提交血糖记录', glucoseForm.value);
};
</script >
<style lang="less" scoped>


.grid {
    display: grid;
}
.grid {
    display: grid;
}
.gap-8 {
    gap: 2rem;
}

.el-icon {
    --color: inherit;
    align-items: center;
    display: inline-flex;
    height: 1em;
    justify-content: center;
    line-height: 1em;
    position: relative;
    width: 1em;
    fill: currentColor;
    color: var(--color);
    font-size: inherit;
}
</style>